import React, { useEffect, useState } from "react";
import styles from "./index.module.css";
import { useNavigate, useSearchParams } from "react-router-dom";
import { InfiniteScroll, List, Switch } from "antd-mobile";
import { NavBar, Space, Toast } from "antd-mobile";
import http from "../../api/http";
import { CalendarO } from "@react-vant/icons";
function Index() {
  const navigate = useNavigate();
  const [sj] = useSearchParams();
  const start = sj.get("start");
  const end = sj.get("end");
  const date = sj.get("date");
  const [isSpeed, setIsSpeed] = useState(false);
  const [isSeat, setIsSeat] = useState(false);
  const [isDesc, setIsDesc] = useState(false);
  const [page, setPage] = useState(1);
  const [Ticklist, setTickList] = useState([]);
  const [hasMore, setHasMore] = useState(true);
  //渲染
  const getTicklist = async () => {
    const res = await http.post("/api/trip/train", {
      start,
      end,
      date,
      isDesc,
      isSeat,
      isSpeed,
      page,
    });
    const { code, data } = res.data;
    console.log("data", data);
    if (code === 200) {
      setTickList([...Ticklist, ...data]);
      setPage((pre) => pre + 1);
    }
    // 无限关东
    if (data.length === 0) {
      setHasMore(false);
    }
  };
  // 生命周期
  useEffect(() => {
    getTicklist();
  }, []);
  // 跳转订单页
  const handleTodeitle = (item) => {
    navigate(`/order`, { state: item });
  };
  return (
    <div>
      <div className={styles.list1}>
        <NavBar onBack={() => navigate(-1)}>合肥-南京</NavBar>
        <div className={styles.timmer}>
          <span>前一天</span>
          <p className={styles.week}>
            <CalendarO fontSize={20} />
            {date} /周二
          </p>
          <span>后一天</span>
        </div>
      </div>

      <div className={styles.listItem_wrap}>
        {Ticklist?.map((item, ind) => (
          <div key={ind} className={styles.box}>
            <div
              className={styles.boxleft}
              onClick={() => handleTodeitle(item)}
            >
              <span>{item.start}</span>
              <span>{item.end}</span>
              <span>{item.startTime}</span>
              <span>
                商务座 <b>有票</b>
              </span>
              <span>
                二等座 <b>有票</b>
              </span>
              <span>
                三等座 <b>有票</b>
              </span>
            </div>
            <div className={styles.boxright}>
              <span onClick={() => handleTodeitle(item)}>
                ￥{item.tick.vip}起
              </span>
            </div>
          </div>
        ))}
      </div>
      <div className={styles.listText}>
        <div>
          <span>筛选</span>
          <Switch
            checked={isSeat}
            onChange={(val) => {
              setIsSeat(val);
            }}
          ></Switch>
        </div>
        <div>
          <span>出发时间</span>
          <Switch
            checked={isDesc}
            onChange={(val) => {
              setIsDesc(val);
            }}
          ></Switch>
        </div>
        <div>
          <span>旅行耗时</span>
          <Switch
            checked={isSpeed}
            onChange={(val) => {
              setIsSpeed(val);
            }}
          ></Switch>
        </div>
      </div>
      {/* 底部数据加载 */}
      <InfiniteScroll loadMore={getTicklist} hasMore={hasMore} />
    </div>
  );
}

export default Index;
